import React, { useState } from "react";
import { Tabs } from "react-vant";

const App = () => {
  const [list, setList] = useState([
    {
      accounts: "苹果15",
      price: -4999,
      date: new Date().toLocaleString(),
      tip: "手机坏了， 换个手机",
    },
    {
      accounts: "工资",
      price: 15000,
      date: new Date().toLocaleString(),
      tip: "每月固定发薪资",
    },
    {
      accounts: "房租",
      price: -2000,
      date: new Date().toLocaleString(),
      tip: "每月交房租",
    },
  ]);
  const [value, setValue] = useState("1");
  const [price, setPrice] = useState("2");
  const [tip, setTip] = useState("3");
  const handleClick = () => {
    // 获取三个 input 的值
    console.log(value, price, tip);

    // 添加
    setList([...list, {
      accounts: value,
      price: price,
      date: new Date().toLocaleString(),
      tip: tip,
    }]);
  };
  return (
    <div>
      <Tabs>
        <Tabs.TabPane title="添加账单">
          {/* 受控组件 */}
          <input
            type="text"
            placeholder="请输入账目"
            value={value}
            onChange={(e) => setValue(e.target.value)}
          />
          {/* 受控组件 */}
          <input
            type="text"
            placeholder="请输入价钱"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
          />
          {/* 受控组件 */}
          <input
            type="text"
            placeholder="请输入备注"
            value={tip}
            onChange={(e) => setTip(e.target.value)}
          />
          <button onClick={() => handleClick()}>确定</button>
          {price}
        </Tabs.TabPane>
        <Tabs.TabPane title="查看账单">
          <table border={1}>
            <thead>
              <tr>
                <th></th>
                <th>账目</th>
                <th>费用</th>
                <th>日期</th>
                <th>备注</th>
              </tr>
            </thead>
            <tbody>
              {list.map((v, i) => {
                return (
                  <tr key={i}>
                    <td>{i + 1}</td>
                    <td>{v.accounts}</td>
                    <td>{v.price}</td>
                    <td>{v.date}</td>
                    <td>{v.tip}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Tabs.TabPane>
        <Tabs.TabPane title="1231231">3</Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default App;
